<template>

	<el-container  class="article-list" style="height: 100%;">
  		<el-header class="header" height="50px">
  			<div class="header-left">上海 晴 2° / 15°</div>
  			<div class="header-right">鼎牛产品</div>
  		</el-header>
  		<el-container class="article-container" style="height:100%;overflow: auto;display: block;">

    		<ul
      			class="list"
      			v-infinite-scroll="load"
      			infinite-scroll-disabled="disabled">
      			<li v-for="i in count" class="list-item">{{ i }}</li>
    		</ul>
    		<p v-if="loading">加载中...</p>
    		<p v-if="noMore">没有更多了</p>

  		</el-container>
	</el-container>

</template>

<script>
	

	export default{
		data(){
			return{
				count: 10,
        		loading: false
			}
		},
		mounted(){
			
		},
		computed:{
			noMore () {
	        	return this.count >= 20
	      	},
	      	disabled () {
	        	return this.loading || this.noMore
      		}
		},
		watch:{
			
		},
		methods:{
			load () {
        		this.loading = true
        		setTimeout(() => {
          			this.count += 2
          			this.loading = false
        		}, 2000)
      		}
			
		},

	}

</script>


<style>
	/*修改登陆tab样式*/
	.login-reg-tabs .el-tabs__nav{
		width: 100%;
		display: flex;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item{
		flex: 1;
		padding: 0;
		text-align: center;
	}

	.login-reg-tabs .el-tabs__nav .el-tabs__item.is-active,.login-reg-tabs .el-tabs__nav .el-tabs__item:hover{
		color: #FF8100;
	}

	.login-reg-tabs .el-tabs__active-bar{
		background-color: #FF8100;
	}

	.article-list .el-header{
		padding: 0;
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		z-index: 1500;
	}
</style>


<style scoped>
	.header{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background: #000;
		color: #fff;
		padding: 0 40px;
		line-height: 50px;
	}

	.article-container{
		padding: 0 20px;
		margin-top: 50px;
	}

	.nav-wrap{
		padding: 20px;
		background-color: #ffffff;
	}
	.logo-wrap,.logo-wrap .logo{
		width:100%;
	}

	.nav{
		list-style: none;
		width: 100%;
		padding: 0;
		margin-top: 0;
		text-align: center;
	}

	.nav .nav-item{
		width: 100%;
		border-radius: 4px;
		padding: 5px 0;
		background-color: #FFFFFF;
		color: #444;
		font-size: 16px;

	}

	.nav .nav-item.current{
		background-color: #FF8100;
		color: #ffffff;
	}

	.nav .nav-item:hover {
	    animation-name: hvr-back-pulse;
	    animation-duration: .2s;
	    animation-timing-function: linear;
	    animation-iteration-count: 1;
	    background-color: #FF8100;
	    color: #fff;
	}

	@keyframes hvr-back-pulse{
		0%{
			background-color:rgba(255,129,0,.6)
		}
		50%{
			background-color:rgba(255,129,0,.76)
		}	
	}

	/*正文列表*/
	.article-list-item{
		list-style: none;
		display: flex;
		flex-direction: row;
		padding: 10px 0;
		border-bottom: 1px solid #e8e8e8;
		cursor: pointer;
	}

	/*单图*/
	.single-list-item .img-wrap .img-item-content{
		width: 156px;
		height: 100px;
		margin-right: 10px;
		overflow: hidden;
	}


	.single-list-item .item-sum-box{
		display: flex;
    	align-items: center;
	}
	
	.single-list-item .img-wrap .img-item-content .img-item{
		max-width: 100%;
	    height: auto;
	    vertical-align: middle;
	}

	.error-img,.error-img>img{
		width: 100%;
		height: 100%;
	}
	/*多图*/
	.article-list-item.multi-thum{
		flex-direction: column;
	}

	.article-list-item.multi-thum .img-wrap{
		width: 100%;
		display: flex;
    	flex-direction: row;
		margin-bottom: 10px;
	}

	.article-list-item.multi-thum .img-wrap>.img-item-content{
		width: 156px;
		height: 100px;
		margin-right: 5px;
		overflow: hidden;
	}

	.article-list-item.multi-thum .img-wrap>.img-item-content>.img-item{
		max-width: 100%;
	    height: 100%;
	    vertical-align: middle;
	}

	.item-sum-box{
		flex-grow: 1;
	}

	.item-sum-box .title{
		font-size: 20px;
		font-weight: 700;
		color: #222;
		line-height: 1.3;
		margin-top: 0;
		margin-bottom: 10px;
	}

	.footer-bar .source,.footer-bar .remark{
		font-size: 14px;
		color: #777;
	}

	.footer-bar .dot{
		color: #666;
	}

	.footer-bar .time{
		font-size: 14px;
		color: #888;
	}

	/*右侧登陆*/
	.form-submit{
		width: 100%;
	}


	.list{
		width: 100%;
		display: block;
	}

	.list .list-item {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 50px;
	    background: #fff6f6;
	    color: #ff8484;
	}
</style>

